<template>
  <div>
      <!--展示选中图片的区域-->
      <!-- <el-dialog :visible.sync="dialogVisible">
        <img width="100%"
             :src="model.imageUrl"
             alt="">
      </el-dialog> -->
      <!--elementui的form组件-->
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-form-item label="类型">
        <!-- <el-input v-model="model.type"></el-input> -->
        <el-select v-model="model.type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="model.title"></el-input>
      </el-form-item>
      <el-form-item label="详情">
        <vue-editor
          v-model="model.content"
          useCustomImageHandler
          @imageAdded="handleImageAdded"
        ></vue-editor>
      </el-form-item>
      <el-form-item label="时间">
        <!-- <el-input v-model="model.time"></el-input> -->
        <el-date-picker
          v-model="model.time"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="图片">
        <!-- <el-input v-model="model.pic"></el-input> -->
         <el-avatar shape="square" :size="200"  :src= "model.pic"></el-avatar>
      </el-form-item>
      <el-form-item label="点赞数">
        <el-input v-model="model.support"></el-input>
      </el-form-item>
      <el-form-item label="轮播图">
        <!-- <el-input v-model="model.isCircle"></el-input> -->
        <el-select v-model="model.isCircle" placeholder="请选择">
          <el-option
            v-for="item in options_isCircle"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="添加图片">
        <!--elementui的上传图片的upload组件-->
      <el-upload class="upload-demo"
                 ref="upload"
                 list-type="picture-card"
                 action="/api/user"
                 :limit="9"
                 :before-upload="beforeupload"
                 :on-exceed="exceedHandle"
                 :auto-upload="false"
                 :multiple='true'>
        <i class="el-icon-plus"></i>
      </el-upload>
      </el-form-item>
      <el-input v-model="model._method" type="hidden"></el-input>
      <el-form-item>
        <el-button type="primary" native-type="submit">保存</el-button>
        <el-button type="primary" @click="downloadExcel">导出excel名单</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>
<script>
import { VueEditor } from "vue2-editor";
import moment from "moment"
import axios from 'axios'
axios.defaults.withCredentials = true // 引入axios

export default {
  props: {
    id: {}
  },
  components: {
    VueEditor
  },
  data() {
    return {
      model: {},
      param: '',
      hasImg: false,
      options: [{
          value: '0',
          label: '比赛'
        }, {
          value: '1',
          label: '活动'
      }],
      options_isCircle: [{
          value: '0',
          label: '无'
        }, {
          value: '1',
          label: '有'
      }],
    }
  },
  methods: {
    beforeupload(file) {
      this.hasImg = true
      this.param = new FormData()
      this.param.append('upload', file)
      return false
    },
    async save() {
      // let res
      // if (this.id) {
      //   this.model._method = "put"
      //   res = await this.$http.post(`/event`, this.model)
      // } else {
      //   res = await this.$http.post('/event', this.model)
      // }
      this.model.type === "活动" ? this.model.type =1:this.model.type = 0;
      if(this.model.isCircle === '有'){
        this.model.isCircle = 1
      }
      if(this.model.isCircle === '无'){
        this.model.isCircle = 0
      }
      console.log(this.model.isCircle)

      if(this.hasImg === false){
        this.param = new FormData()
      }
      let _this = this
      _this.$refs.upload.submit()
      if (this.id) {
        this.param.append('_method',"put")
      }
      this.param.append('eventId', _this.model.eventId)
      this.param.append('title', _this.model.title)
      this.param.append('type', _this.model.type)
      this.param.append('content', _this.model.content)
      this.param.append('time', _this.model.time)
      this.param.append('pic', _this.model.pic)
      this.param.append('support', _this.model.support)    
      this.param.append('isCircle', _this.model.isCircle)    
      // 4.3，然后通过下面的方式把内容通过axios来传到后台
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          "Authorization": localStorage.token || ''
        }
      }
      console.log(this.param)
      axios.post('/api/event', this.param, config).then(function (result) {
        console.log(result)
      }) 
      this.$router.push('/events/list')
      this.$message({
        type: 'success',
        message: '保存成功'
      })
    },
    async fetch() {
      const res = await this.$http.get(`event/${this.id}`)
      this.model = res.data.event
      //时间戳转化为标准时间
      let timeUTC = moment(this.model.time).format()
      console.log(timeUTC)
      console.log(moment(timeUTC).format("YYYY-MM-DD HH:mm"))
      this.model.time = moment(timeUTC).format("YYYY-MM-DD HH:mm")
      this.model.pic = "http://121.199.23.187:8080/static/images/event/"+this.model.pic
      this.model.type === 1 ? this.model.type ="活动":this.model.type ="比赛"
      this.model.isCircle === 1 ? this.model.isCircle ="有":this.model.isCircle ="无"
    },
    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      const formData = new FormData();
      console.log("添加图片")
      formData.append('file', file);
      const res = await this.$http.post('upload', formData)
      Editor.insertEmbed(cursorLocation, "image", res.data.url);
      resetUploader();
    },
    async downloadExcel(){
      console.log(this.model)
      window.location.href=`http://121.199.23.187:8080/getTakePartExcel/${this.model.eventId}`
    },
    // 5设置超过9张图给与提示
    exceedHandle () {
      alert('您现在选择已超过9张图，请重新选择')
    }
  },

  created() {
    this.id && this.fetch()
  }
}
</script>
<style>
    input[type="file"] {
        display: none;
    }
 
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
 
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
 
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
 
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

